
import Taro, {Component } from '@tarojs/taro'
import {View, Image } from '@tarojs/components'
import {pageSize, navigateTo, showToast, showModel} from "../../utils/common";

import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import { namePartOf, cardNumPartOf } from '../../utils/common'

import './bank.scss'

import icon_86 from "../../assets/img/common/icon_86.png";
import icon_87 from "../../assets/img/common/icon_87.png";

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class OrderIndex extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [] as any
  }

  componentWillMount() {
    this.getItems()
  }

  componentDidShow(): void {
    this.getItems()
  }

  getItems() {
    let { userStore } = this.props.stores
    userStore.getUserCardsAsync({
      callback: res => {
        this.setState({ items: res.items })
      }
    })
  }

  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  onDelete(id: string) {
    if(!id) { showToast('参数错误~'); return }
    showModel('提示','您确定要删除该银行卡吗?','立即删除',() => {
      let { userStore } = this.props.stores
      userStore.removeUserCardAsync({
        cardId: id,
        callback: () => {
          showToast('删除银行卡成功！')
          this.getItems()
        }
      })
    })
  }

  render() {
    let {items} = this.state
    return (
      <View className='page-bg content-20'>
        {
          items.length > 0 &&
          <View className='bank'>
            <View className='list-bank'>
              {
                items.map(item => {
                  return(
                    <View className='list-bank__item'>
                      <Image src={icon_86} className='list-bank__img' />
                      <View className='list-bank__info'>
                        <View className='list-bank__title'>{item.bankName}</View>
                        <View className='list-bank__desc desc'>储蓄卡 {namePartOf(item.cardName)}</View>
                        <View className='list-bank__card-no'>{cardNumPartOf(item.cardNumber)}</View>
                      </View>
                      <Image src={icon_87} className='list-bank__r' onClick={this.onDelete.bind(this, item.id)} />
                    </View>
                  )
                })
              }
            </View>
          </View>
        }
        {
          items.length <= 0 &&
          <View className='none'>
             <Image className='none__icon' src={require('../../assets/img/common/none_card.png')} />
             <View className='none__desc desc'>你还没有添加银行卡哦！</View>
          </View>
        }
        <View className='footer-block' />
        <View className='page-submit' onClick={this.link.bind(this, '/pages/mine/bankAdd')}>+ 添加银行卡</View>
      </View>
    )
  }
}

export default OrderIndex

